<template>
  <div class="chart-box">
    <div class="head">
      <div class="line-box">
        <div class="line"></div>
        <div class="line-content">招商行业分析</div>
        <div class="line"></div>
      </div>
    </div>
    <div class="box-main">
      <a-spin :spinning="spinning">
        <div v-show="dataList.length" class="chart-content" id="ProfessionAnalysis-Business" ></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="!dataList.length"
        />
      </a-spin>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  computed,
  watch,
  onMounted,
  reactive,
  toRefs,
  onUnmounted,
  ref,
  nextTick,
} from "vue";
import { Chart } from "@antv/g2";
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import _ from "lodash";
import { Empty } from "ant-design-vue";

export default defineComponent({
  name: "ProfessionChart",
  components: {
    Empty,
  },
  setup(props, context) {
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    const state = reactive({
      spinning: false,
      chart: {},
      dataList: [],
    })

    const renderChart = () => {
      state.spinning = true;
      request.get("/org", "/business/customer/ways/industry").then((res) => {
        res.data.forEach((item) => {
          item.percent = Number(item.percent);
          item.name = item.name ? item.name : '无';
        });
        state.dataList = res.data;
        nextTick(() => {
          state.chart = new Chart({
            container: 'ProfessionAnalysis-Business',
            autoFit: true,
            appendPadding: [30],
          });
          state.chart.coordinate("theta", {
            outerRadius: 0.8
          });

          state.chart.tooltip({
            showMarkers: false,
          });
          state.chart.legend("color",  { position: 'bottom', layout: { justifyContent: 'center' } });

          state.chart
            .interval()
            .adjust("stack")
            .position("percent")
            .color("name")
            .style({
              fillOpacity: 1,
            })
            .label('percent', {
              layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'} }],
              content: (data) => {
                return `${data.name}: ${data.percent}%`;
              },
            })
            .state({
              active: {
                style: element => {
                  const shape = element.shape;
                  return {
                    lineWidth: 10,
                    stroke: shape.attr('fill'),
                    strokeOpacity: shape.attr('fillOpacity'),
                  };
                },
              },
            });
          // 移除图例点击过滤交互
          state.chart.removeInteraction('legend-filter');
          state.chart.interaction("element-active");
          state.chart.changeData(state.dataList);
          state.chart.render();
          state.spinning = false;
        })
      });
    }


    onMounted(() => {
      renderChart();
    });

    onUnmounted(() => {
      if (!_.isEmpty(state.chart)) {
        state.chart.destroy();
      }
    })


    return {
      ...toRefs(state),
      simpleImage,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  height: 600px;
  width: 100%;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
}
.head {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 16px;
}
.box-main {
  flex: 1;
}

.line-box {
  display: flex;
  align-items: center;
  .line {
    width: 20px;
    height: 2px;
    background: @primary-color;
  }
  .line-content {
    padding: 0 6px;
    color:@primary-color;
  }
}
.chart-content {
  width: 100%;
  height: 100%;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>